<template>
    <div class="productList" id="productList">
        <div id="productList2">
            <div>1.平板炉纸垫(张)：一次性纸质卫生垫，用于平板炉火化</div>
            <div></div>
            <div>2.遗体识别卡(个)：手环绑带，用于辨别遗体</div>
            <div></div>
            <div>3.捡灰托盘(次)：不锈钢装灰托盘。</div>
            <div></div>
            <div>4.小白花(朵)：根据丧属需求，免费赠送。</div>
            <div></div>
            <div>5.白信封(个)：业务办理结束、根据丧属需求，免费赠送。</div>
            <div></div>
            <div>6.绢花花圈(个)：根据丧属需求，免费使用。</div>
            <div></div>
            <div>7.黑纱(米)：根据丧属需求，免费使用。</div>
            <div></div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                interval3: '',
            }
        },
        props: {
            isScroll: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            isScroll(nVal, oVal) {
                if (nVal) {
                    this.scrollView2()
                } else {
                    clearInterval(this.interval3)
                }
            }
        },
        mounted() {
        },
        beforeDestroy() {
            clearInterval(this.interval3)
        },
        methods: {
            scrollView2() {
                this.$nextTick(()=>{
                    let productList = document.getElementById('productList')	
                    let productList2 = document.getElementById('productList2')	
                    let startL = -productList.offsetHeight
                    this.interval3 = setInterval(() => {
                        startL+=1
                        if (startL >= (productList2.scrollHeight)) {
                            startL = -productList.offsetHeight
                        }
                        productList2.style.top = -startL + 'px'//上移高度
                    }, 30)
                })
            },
        },
    }
</script>
<style scoped lang="scss">
    .productList {
        background: rgb(38, 80, 144);
        font-size: 70px;
        letter-spacing: 5px;
        text-align: left;
        text-indent: 140px;
        line-height: 120px;
        padding: 0 20px;
        height: 100%;
        overflow-y: scroll;
    }
    #productList2 {
        position: relative;
    }
</style>